<template>
    <a-modal
        title="上传"
        :width="500"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleSubmit"
        @cancel="handleCancel"
    >
    <a-upload-dragger
        name="file"
        :file-list="fileList"
        @change="handleChange"
        :remove="handleRemove"
        :before-upload="beforeUpload"
    >
        <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">
            将文件拖到此处或点击上传
        </p>
    </a-upload-dragger>
    <div class="xiazaidiv">
        <a class="xiazaispan" @click="xiazaifunc">点击下载模板</a>
    </div>
  </a-modal>
</template>
<script>
import { axios } from '@/utils/request'
export default {
    data(){
        return {
            attrs: {
                name: 'file',
                showUploadList: false,
                action: '/upload.do',
            },
            visible: false,
            confirmLoading: false,
            fileList: [],
        }
    },
    methods: {
        showUpload(obj){
            this.visible = obj.visible
        },
        handleRemove(file) {
            const index = this.fileList.indexOf(file);
            const newFileList = this.fileList.slice();
            newFileList.splice(index, 1);
            this.fileList = newFileList;
        },
        beforeUpload(file) {
            this.fileList = [file];
            console.log(this.fileList)
            return false;
        },
        handleUpload() {
                    console.log('开始导入-----')
            const { fileList } = this;
            const formData = new FormData();
            fileList.forEach(file => {
                formData.append('File', file);
            });
            this.uploading = true;

            // You can use any AJAX library you like
            axios({
                url: '/Children/ImportChildren',
                method: 'post',
                processData: false,
                data: formData,
            }).then(res => {
                if(res.code == 200 && res.success){
                    
                    console.log('导入成功')
                    this.fileList = [];
                    this.uploading = false;
                    this.$message.success('导入成功');
                    this.$emit('success')
                }else{
                    
                this.uploading = false;
                this.$message.error('导入失败');
                }
            }).catch(err => {
                
                this.uploading = false;
                this.$message.error('导入失败');
            });
        },
        xiazaifunc(){
            let baseURL = process.env.VUE_APP_API_BASE_URL
            // window.open(baseURL + '/Children/ImportTemp', '导入模板')
            this.downFile(baseURL + '/Children/ImportTemp', '幼儿导入模板')
        },
        downFile(url, fileName) {
            const x = new XMLHttpRequest()
            x.open('GET', url, true)
            x.responseType = 'blob'
            x.onload = function() {
                const url = window.URL.createObjectURL(x.response)
                const a = document.createElement('a')
                a.href = url
                a.download = fileName
                a.click()
            }
            x.send()
        },
        handleSubmit(){
            this.handleUpload()
        },
        handleCancel(){
            if(this.uploading){
                return
            }
            this.fileList = [];
            this.$emit('close')
        },
        handleChange(){

        },
    }
}
</script>
<style lang="less" scoped>
    .xiazaidiv{
        padding: 20px;
    }
    .xiazaispan{
        cursor: pointer;
    }
</style>
